<template>
  <div v-loading="loading" class="recommend-author-box">
    <div class="recommend-author-main-box">
      <div  class="recommend-author-small-box" v-for="(item,index) in hotInfo" :key="index">
        <el-card :body-style="bodyStyle" shadow="hover">
          <img :src="item.header_image" class="recommend-author-img">
          <div style="padding: 14px;">
            <span class="recommend-author-name">{{item.nickname}}
              <span class="iconfont icon-nan" v-if="item.sex==='男'"></span>
              <span class="iconfont icon-nv" v-if="item.sex==='女'"></span>
            </span>
            <span class="recommend-author-desc" :title="item.sign">{{item.sign}}</span>
            <el-button @click="follow(item)" v-if="!item.followed" type="success" class="recommend-author-follow-button"><i class="el-icon-plus"></i>关注</el-button>
            <el-button @click="cancel(item)" v-if="item.followed" type="info" class="recommend-author-followed-button"><i class="el-icon-check"></i>已关注</el-button>
          </div>
        </el-card>
      </div>
    </div>
    <el-button @click="showMore" class="recommend-author-show-more-button" type="primary" plain :disabled="!isShowMore">{{showMoreText}}</el-button>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {getHotUser} from "../../api/user";
  import {userFollow,getUserFollow,unFollow} from "../../api/operation";


    export default {
        name: "index",
        data(){
            return{
              bodyStyle:{
                padding:'20px',
                textAlign:'center',
                border:'1px solid #e6e6e6'
              },
              hotInfo:{},
              loading:false,
              count:'',
              page_size:9,   //一页显示多少
              speed:9,  //累加的个数
              showMoreText:'加载更多',
              isShowMore:true,   //是否显示更多
              followInfo:{}
            }
        },
      created(){
        this.loading=true;
        this.getHotUserList(this.page_size);
      },
      computed:{
        ...mapState('user', {
          token: state => state.token,
        }),
      },
      methods:{
        getHotUserList(count){
          let vm=this;
          vm.showMoreText='拼命加载中...';
          getHotUser('?page_size=' + count).then(res=>{
            vm.hotInfo=res.data.results;
            vm.count=res.data.count;
            vm.showMoreText='加载更多';
            getUserFollow('').then(res=>{
              vm.followInfo=res.data.results;
              for(let i in vm.hotInfo){
                for(let j in vm.followInfo){
                  if(vm.hotInfo[i].id === vm.followInfo[j].followed_user.id){
                    vm.hotInfo[i].followed=true;
                    console.log('11');
                    break;
                  }
                }
              }
              vm.loading=false;
            }).catch(error=>{
              vm.loading=false;
            })
          }).catch(error=>{
            vm.showMoreText='加载更多';
            vm.loading=false;
            console.log(error.data);
          })
        },
        showMore(){
          let vm=this;
          if(vm.count<=vm.page_size){
            vm.isShowMore=false;
            vm.showMoreText='已经到底了...'
          }else{
            vm.page_size+=vm.speed;
            vm.getHotUserList(vm.page_size);
          }
        },
        follow(item){
          let vm=this;
          if(vm.token){
            userFollow({"followed_user":item.id}).then(res=>{
              vm.$message.success('关注成功');
              item.followed=true;
            }).catch(error=>{
              vm.$message.error("关注失败");
            })
          }else{
            vm.$message.error('请先登录在进行以下操作');
          }
        },
        cancel(item){
          let vm=this;
          if(vm.token){
            unFollow(item.id).then(res=>{
              vm.$message.success('取消关注成功');
              item.followed=false;
            }).catch(error=>{
              vm.$message.error('取消关注失败');
            });
          }else{
            vm.$message.error('请先登录在进行以下操作');
          }
        },
      }
    }
</script>

<style lang="stylus" scoped>
@import "../../stylus/color.styl"

.recommend-author-box{
  max-width 1000px
  width 100%
  margin 0 auto
  text-align center
}
.recommend-author-main-box{
  max-width 1000px
  width 100%
  margin 0 auto
}
.recommend-author-small-box{
  padding 0 20px
  margin-top 60px
  width 28%
  display inline-block
}
.recommend-author-img{
  width 80px
  height 80px
  border-radius 40px
  margin 0 auto
}
.recommend-author-name{
  display block
  font-size 21px
  font-weight 700
  color $color-title
  margin-bottom 15px
}
.recommend-author-desc{
  display block
  color $color-content
  font-size 13px
  margin-bottom 10px
  min-height 50px
  line-height 25px
  max-height 50px
  overflow hidden
}
.el-icon-plus{
  font-size 14px
  margin-right 4px
  font-weight 500
}
.el-icon-check{
  font-size 14px
  margin-right 4px
  font-weight 500
}
.recommend-author-show-more-button{
  width 300px
  margin 30px 0 40px 0
}
.icon-nan{
  color $color-blue
  font-size 18px
  font-weight 600
}
.icon-nv{
  color $color-pink
  font-size 18px
  font-weight 600
}
</style>
